<template>
  <div class="border">
        <!-- 第一行 -->
        <div class="shuoming">
          说明：目前支持学科和关键字条件筛选
          <!--                                                      点击后 跳转到 试题录入页面 -->
          <el-button type="success" class="addBut" @click="$router.push('/questions/new')">新增标题</el-button>
        </div>
        <el-form :inline="true">
          <el-form-item label-width="80px" label="学科 ">
            <el-select style="width:220px" placeholder="请选择" v-model="questionList.subjectID">
              <el-option v-for="item in list" :key="item.id" :label="item.subjectName" :value="item.id" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="80px" label="二级目录" >
            <el-select style="width:220px" placeholder="请选择" v-model="catalogID">
              <el-option  v-for="item in list" :key='item.id' :label='catalogID' :value="item.catalogID"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="80px" label="标签  ">
            <el-select style="width:220px" placeholder="请选择" v-model="tags">
              <el-option  v-for="item in list" :key='item.id' :label="tags" :value="item.tags"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="80px" label="关键字 ">
            <el-input style="width:220px" v-model="questionList.keyword" @input="changevalue" placeholder="根据题干搜索"></el-input>
          </el-form-item>
        </el-form>
        <!-- 第二行  -->
        <el-form :inline="true">
          <el-form-item label-width="80px" label="试题类型">
            <el-select style="width:220px" placeholder="请选择" v-model="questionType">
              <el-option  v-for="item in list" :key="item.id" :label="item.questionType" :value="item.questionType"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="80px" label="难度">
            <el-select style="width:220px" placeholder="请选择" v-model="difficulty">
              <el-option  v-for='item in list' :key='item.id' :label='item.difficulty' :value="item.difficulty" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="80px" label="方向">
            <el-select style="width:220px" placeholder="请选择" v-model="direction">
              <el-option  v-for="item in list" :key="item.id" :label="item.direction" :value="item.direction"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="80px" label="录入人">
            <el-select style="width:220px" placeholder="请选择" v-model="creatorID">
              <el-option v-for="item in list" :key="item.id" :label="item.creatorID" :value="item.creatorID"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 第三行 -->
        <el-form :inline="true">
          <el-form-item label-width="80px" label="题目备注 ">
            <el-input style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label-width="80px" label="企业简称">
            <el-input style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label-width="80px" label="城市" >
            <el-select style="width:110px" placeholder="请选择" v-model="cityname" @change="change">
              <el-option  v-for="item in provinces" :key="item.id" :label="item" :value="item"></el-option>
            </el-select>
            <el-select style="width:110px" placeholder="请选择" v-model="city">
              <el-option  v-for="item in list" :key='item.id' :label='item.city' :value='item.city' ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 150px" class="left">
            <el-button type="primary" @click="emptyl">清除</el-button>
            <el-button >搜索</el-button>
          </el-form-item>
        </el-form>
  </div>
</template>

<script>
import { sublist } from '@/api/hmmm/subjects'

// import { sublist } from '../../../api/hmmm/subjects'
// import { provinces } from '../../../api/hmmm/provinces'

export default {
  data () {
    return {
      list: [],
      timer: null, //   定时器
      city: '',
      provinces: '',
      cityname: '',
      creatorID: '',
      direction: '',
      difficulty: '',
      questionType: '',
      tags: '',
      catalogID: '',
      change: '',
      questionList: {
        subjectID: '',
        keyword: ''
      }
    }
  },
  created () {
    this.sublist() // 学科列表
    // this.questionsList()
  },
  methods: {
    //   获取 学科列表
    async sublist () {
      const res = await sublist()
      this.list = res.data.items
      // console.log('852', res)
    },
    //   搜索 功能
    changevalue () {
      console.log(this.questionList.keyword)
      //   防抖
      //   定时器
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        console.log('我执行了')
        // this.qu
      }, 300)
      // this.$emit('search', this.questionList)
    },
    emptyl (empty) {
      this.empty = empty = ''
    }
  }
}
</script>

<style rel="stylesheet/scss" scoped lang="scss">
.shuoming {
  font-size: 12px;
  color: pink;
  display: flex;
  justify-content: space-between;
}
.demo-form-inline {
  display: flex;
  justify-content: space-between;
}

</style>
